<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <ul>
      <!--
        border-bottom 是来自一开始解决移动端1PX像素的公共CS的方法。 可以直接用
        对于产品介绍， 一般图片一个class  内容介绍一个div。
        用flex布局， 会弹性布局。
        对于一些字体来说的话， 一般要考虑不换行 white-space:nowrap; overflow:hidden；   text-overflow ellipsis; 超出的字 变....
        -->
      <router-link tag="li" class="item border-bottom" v-for="(item,index) of recommendList" :key="item.id"  :class="{'mt20':index>0?true:false}"
        :to="'/detail/'+item.id"
        >
          <img :src="item.imgUrl" alt="" class="item-img">
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name:'homeRecommend',
  props:{
    recommendList:Array
  },
  data(){
    return{
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title{
  margin-top .2rem;
  line-height .8rem;
  text-indent .2rem;  // 文本缩进
  background #eee;
}
.mt20{
  margin-top .2rem;
}
.item{
  display flex
  height 1.9rem;
  overflow hidden;
  .item-img{
  height 1.7rem;
  width 1.7rem;
  padding .1rem;
  }
  .item-info{
    flex 1;
    padding .1rem;
    min-width 0; //当下面的换行没有效果的时候。 可以在父级div添加一个min-width:0. 让其有效果
    .item-title{
      line-height .54rem;
      font-size .32rem;
      ellipsis();
    }
    .item-desc{
      line-height .4rem;
      color:#ccc;
      ellipsis();
    }
    .item-button{
      line-height .2rem;
      background #ff9300;
      padding  .2rem;
      border-border-radius .2rem;
      color #fff;
    }
  }
}
</style>

